package accordion

import (
	"github.com/templui/templui/internal/components/icon"
	"github.com/templui/templui/internal/utils"
)

type Props struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type ItemProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type TriggerProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type ContentProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

templ Accordion(props ...Props) {
	{{ var p Props }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</div>
}

templ Item(props ...ItemProps) {
	{{ var p ItemProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<details
		if p.ID != "" {
			id={ p.ID }
		}
		name="accordion"
		class={
			utils.TwMerge(
				"group border-b last:border-b-0",
				"[&[open]>summary>svg]:rotate-180",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</details>
}

templ Trigger(props ...TriggerProps) {
	{{ var p TriggerProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<summary
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"flex flex-1 items-start justify-between gap-4 py-4",
				"text-left text-sm font-medium",
				"transition-all hover:underline cursor-pointer",
				"outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring rounded-md",
				"disabled:pointer-events-none disabled:opacity-50",
				"list-none [&::-webkit-details-marker]:hidden",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
		@icon.ChevronDown(icon.Props{
			Size:  16,
			Class: "size-4 shrink-0 translate-y-0.5 transition-transform duration-200 text-muted-foreground pointer-events-none",
		})
	</summary>
}

templ Content(props ...ContentProps) {
	{{ var p ContentProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"pt-0 pb-4 text-sm overflow-hidden",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</div>
}
